<template>
  <div class="bpmn-base-info">
    <el-form ref="bpmnBaseInfoRef" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="所属分类" prop="category">
            <el-tree-select
                v-model="form.category"
                :data="categoryOptions"
                :props="{ value: 'code', label: 'name', children: 'children' }"
                value-key="code"
                placeholder="选择所属分类"
                check-strictly
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="流程名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入流程名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="流程标识" prop="modelKey">
            <el-input v-model="form.modelKey" :disabled="modelKeyDisabled" placeholder="请输入流程标识"/>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
  </div>
</template>

<script setup name="BpmnBaseInfo">
import {listToTree} from "@/utils/treeHelper.js";
import {getCategories, initStartEventBpmn, saveBpmnModel} from "@/api/flowable/bpmn/modelInfo.js";

const {proxy} = getCurrentInstance();
const categoryOptions = ref([]);
const modelKeyDisabled = ref(false);

/** 查询部门下拉树结构 */
const getCategoryTree = () => {
  getCategories().then(response => {
    const treeList = response.data;
    const treeData = listToTree(treeList);

    categoryOptions.value = treeData;
  });
}

const props = defineProps({
  modelId: {
    type: String,
    default: '',
  }
})

const $emit = defineEmits(['onLoadSuccess'])
// 回显信息
watch(() => props.modelId, modelId => {
  if (modelId) {
    form.value = {

    };
  }
},{ immediate: true });
const designer = ref()

// 表单参数
const data = reactive({
  form: {},
  rules: {
    category: [{ required: true, message: "分类不能为空", trigger: "blur" }],
    modelKey: [{ required: true, message: "模板标识不能为空", trigger: "blur" }],
    name: [{ required: true, message: "模板名称不能为空", trigger: "blur" }],
  }
});
const { form, rules} = toRefs(data);
/** 表单重置 */
function reset() {
  form.value = {
    id: undefined,
    name: undefined,
    modelKey: undefined,
    category: undefined
  };
  modelKeyDisabled.value=false;
  proxy.resetForm("bpmnBaseInfoRef");
}
/** 提交按钮 */
const submitForm = async(showTip) => {
  const valid = await proxy.$refs["bpmnBaseInfoRef"].validate();
  if (valid) {
    try {
      let response = {};
      if (form.value.id !== undefined) {
        response = await saveBpmnModel(form.value);
      } else {
        response = await initStartEventBpmn(form.value);
      }

      if(showTip === undefined || !!showTip){
        proxy.$modal.msgSuccess(response.msg);
      }
      modelKeyDisabled.value = true;
      return Promise.resolve(form.value);
    } catch (e) {
      return Promise.reject(e);
    }
  }
}

/** 获取表单数据 */
const getFormData = async() => {
  const valid = await proxy.$refs["bpmnBaseInfoRef"].validate();
  if (valid) {
    return form.value;
  }else{
    return null;
  }
}

function initData(data) {
  // data.name = data.modelName;

  form.value = {category: data.categoryCode, modelKey: data.modelKey, name: data.modelName};
  if(data.modelKey){
    modelKeyDisabled.value = true;
  }
  // proxy.resetForm("bpmnBaseInfoRef");
}
getCategoryTree();

defineExpose({
  initData,
  submitForm,
  reset,
  getFormData,
})
</script>
<style lang="scss" scoped>
.bpmn-base-info {
  height: 100%;

  > iframe {
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
  }
}
</style>
